<template>
  <div>
    <el-dialog
      :title="dialog.title"
      :visible.sync="dialog.open"
      width="max-content"
      append-to-body
      center
    >
      <el-row style="position: relative;">
        <el-button
          :class="['refresh', loading ? 'rotate-cartoon' : '']"
          type="success"
          plain
          circle
          icon="el-icon-refresh-right"
          size="small"
          @click="getData"
        ></el-button>
        <el-table :data="tableList" :fit="true" highlight-current-row>
          <el-table-column
            type="index"
            label="序号"
            align="center"
            width="100px"
          >
          </el-table-column>
          <el-table-column
            prop="equipName"
            label="呼叫器名称"
            width="150px"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="createDate"
            label="心跳记录时间"
            width="200px"
            align="center"
          >
          </el-table-column>
        </el-table>
        <div class="pageBox">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.pageNo"
            :page-sizes="[20, 50, 100]"
            :page-size="page.pageSize"
            layout="total, sizes, jumper, next, pager, prev"
            :total="page.pageTotal"
          ></el-pagination>
        </div>
      </el-row>
    </el-dialog>
  </div>
</template>
<script>
import BeeperApi from "@/api/equip/beeper";
export default {
  data() {
    return {
      dialog: {
        open: false, // 默认隐藏
        title: "",
      },
      equipId: "",
      tableList: [],
      loading: false,
      page: {
        pageNo: 1,
        pageTotal: 0,
        pageSize: 20,
      },
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.$Utils.clearData(this.tableList);
    },
    handleCreate(val) {
      // 父组件 调用子组件
      this.dialog.open = true; // 显示弹出框
      this.dialog.title = "心 跳 记 录";
      this.equipId = val;
      this.getData();
    },
    getData() {
      var cond = {
        equipId: this.equipId,
        pageSize: this.page.pageSize,
        pageNo: this.page.pageNo,
      };
      this.loading = true;
      BeeperApi.heartbeatPage(cond).then((res) => {
        this.loading = false;
        this.tableList = res.data.list || [];
        this.page.pageTotal = res.data.total
      });
    },
    handleSizeChange(size) {
      let _this = this;
      _this.page.pageSize = size;
      _this.getData();
    },
    handleCurrentChange(val) {
      let _this = this;
      _this.page.pageNo = val;
      _this.getData();
    },
  },
};
</script>

<style scoped lang="scss">
.refresh {
  position: absolute;
  left: 20px;
  z-index: 9999;
  top: -65px;
  font-size: 16px;
}
.rotate-cartoon {
  animation: cartoon 0.5s linear 0s infinite backwards;
  // -webkit-animation:cartoon .3s linear 0  infinite
}
@keyframes cartoon {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
.pageBox {
  text-align: center;
  margin-top: 10px;
}
</style>
